<template>
	<lay-container fluid="true" class="menu-box">
		<div class="table-box">
      <lay-table
        :height="`100%`"
        ref="tableRef"
        :loading="loading"
        children-column-name="children"
        :columns="menuColumn"
        :data-source="menuList"
        :default-toolbar="true"
        :default-expand-all="defaultExpandAll"
        :expand-index="1"
      >
				<template #toolbar>
          <lay-button type="primary" size="sm" @click="getCheckData"
            >获取选中数据</lay-button
          >
          <lay-button
            size="sm"
            @click="changeVisibleForm('新建', null)"
            type="normal"
          >
            新建
          </lay-button>
          <lay-button size="sm" @click="expandAll(true)">展开全部</lay-button>
          <lay-button size="sm" @click="expandAll(false)">折叠全部</lay-button>
        </template>

				<template #name="{ row }">
          <lay-icon :class="row.icon"></lay-icon> &nbsp;&nbsp;
          {{ row.name }}
        </template>
				
				<template #option="{ row }">
          <lay-button @click="changeVisibleForm('新建', row)" size="xs" border="blue" border-style="dashed">
            添加
          </lay-button>
          <lay-button @click="changeVisibleForm('修改', row)" size="xs" border="green" border-style="dashed">
            修改
          </lay-button>
          <lay-button @click="toRemove(row.id)" size="xs" border="red" border-style="dashed">
            删除
          </lay-button>
        </template>

				<template #type="{ row }">
          <div v-show="row.type == '目录'">
            <lay-tag color="#165DFF" variant="light">目录</lay-tag>
          </div>
          <div v-show="row.type == '菜单'">
            <lay-tag color="#2dc570" variant="light">菜单</lay-tag>
          </div>
        </template>
			</lay-table>
	 	</div>

		<lay-layer v-model="visibleForm" :title="title" :area="['700px', '410px']">
      <div style="padding: 6px">
        <lay-form :model="menuForm" ref="layFormRef" required>
          <lay-row>
							<lay-col>
								<lay-form-item label="父菜单名" prop="parentName">
									<lay-input v-model="menuForm.parentName" disabled style="background-color: #f3f3f3;"></lay-input>
								</lay-form-item>
							</lay-col>
							<lay-col md="12">
								<lay-form-item label="菜单名称" prop="name">
									<lay-input v-model="menuForm.name"></lay-input>
								</lay-form-item>
							</lay-col>
							<lay-col md="12">
								<lay-form-item label="图标" prop="icon">
									<lay-icon-picker v-model="menuForm.icon" type="layui-icon-face-smile" page showSearch></lay-icon-picker>
								</lay-form-item>
							</lay-col>
							<lay-col md="12">
								<lay-form-item label="路由地址" prop="url">
									<lay-input v-model="menuForm.url"></lay-input>
								</lay-form-item>
							</lay-col>
							<lay-col md="12">
								<lay-form-item label="是否可见" prop="isShowCn">
									<lay-switch 
											v-model="menuForm.isShow" 
											onswitch-text="是" onswitch-value="0" 
											unswitch-text="否" unswitch-value="1">
									</lay-switch>
								</lay-form-item>
							</lay-col>
							<lay-col>
								<lay-form-item label="菜单描述" prop="description">
									<lay-textarea 
											placeholder="请输入描述" 
											show-count 
											:maxlength="20" 
											v-model="menuForm.description">
									</lay-textarea>
								</lay-form-item>
							</lay-col>
          </lay-row>
        </lay-form>
        <div style="width: 97%; text-align: right">
          <lay-button size="sm" type="primary" @click="toSubmit"
            >保存</lay-button
          >
          <lay-button size="sm" @click="toCancel">取消</lay-button>
        </div>
      </div>
    </lay-layer>
	</lay-container>
</template>
  
<script lang="ts">  
import { defineComponent, onMounted, reactive, ref } from 'vue';  
import { menu } from '../../../api/module/menu';  
import { layer } from '@layui/layer-vue';
import { menuSave, menuDel } from '../../../api/module/menu';

export default defineComponent({  
  setup() {
		const title = ref('新增')
		const visibleForm = ref(false)
		const tableRef = ref()
		const layFormRef = ref()
		const loading = ref(false)
		const defaultExpandAll = ref(false)
		const searchQuery = ref({
			name: '',
			url: ''
		})
		const menuForm = ref({
			id: '',
			name: '',
			parentId: '1',
			parentName: '',
			url: '',
			isShow: '0',
			type: '',
			isLeaf: 1,
			description: '',
			icon: "layui-icon-home",
		})
		const menuList = ref([]);
		const menuColumn = [
			{
				fixed: 'left',
				type: 'checkbox',
				title: '复选'
			},

			{
				title: '菜单名称',
				key: 'name',
    		customSlot: 'name'
			},
			{
				title: '菜单地址',
				key: 'url'
			},
			{
				title: '排序',
				width: '120px',
				key: 'sort'
			},
			{
				title: '可见',
				key: 'isShowCn'
			},
			{
				title: '类型',
				key: 'type',
				customSlot: 'type'
			},
			{
				title: '操作',
				key: 'option',
				customSlot: 'option'
			}
		]

		// 获取所选数据
		const getCheckData = function () {
			layer.msg(tableRef.value.getCheckData())
		}

		// 展开全部、折叠全部
		const expandAll = function (flag: any) {
			defaultExpandAll.value = flag
		}

		// 新增、编辑
		const changeVisibleForm = (text: any, row: any) => {
			title.value = text
			if (row != null) {
				let info = JSON.parse(JSON.stringify(row))
				if (text == '新建') {
					menuForm.value = {
						id: '',
						name: '',
						parentId: info.id,
						parentName: info.name,
						url: '',
						isShow: '0',
						type: '',
						isLeaf: 1,
						description: '',
						icon: "layui-icon-home",
					}
				} else {
					menuForm.value = info
				}
			} else {
				menuForm.value = {
					id: '',
					name: '',
					parentId: '1',
					parentName: '功能菜单',
					url: '',
					isShow: '0',
					type: '',
					isLeaf: 1,
					description: '',
					icon: "layui-icon-home",
				}
			}
			visibleForm.value = !visibleForm.value
		}

		// 删除
		function toRemove(menuId: any) {
			layer.confirm('您将删除所有选中的数据？', {
				title: '提示',
				btn: [
					{
						text: '确定',
						callback: (id: any) => {
							menuDel(menuId).then(({code,msg}) =>{
								setTimeout(() =>{
									if(code == 200){
										layer.msg('删除成功！', { icon: 1 }, async () => {
											layer.close(id)
											change();
										})
									}else{
										layer.msg(msg, { icon: 2 })
										change();
									}
								} ,1000)
							})
						}
					},
					{
						text: '取消',
						callback: (id: any) => {
							layer.close(id)
						}
					}
				]
			})
		}

		// 保存
		function toSubmit() {
			menuSave(menuForm.value).then(({code,msg}) =>{
				setTimeout(() =>{
					if(code == 200){
						layer.msg('保存成功！', { icon: 1 }, async () => {
							visibleForm.value = false
							change();
						})
					}else{
						layer.msg(msg, { icon: 2 })
						change();
					}
				} ,1000)
			})
		}

		// 取消
		function toCancel() {
			visibleForm.value = false
			change();
		}
		
		const change = () => {
			// 菜单查询
			menu().then(({ data, code, msg }) => {  
        if (code === 200) {
          menuList.value = data;
        } else {  
          layer.msg(msg, { icon: 2 });  
        }  
      });  
		};

		// 加载时调用
    onMounted(() => {
			change();
    });  
  
    return {
			loading,
			tableRef,
			layFormRef,
			title,
			menuForm,
			visibleForm,
			searchQuery,
      menuList,
			menuColumn,
			defaultExpandAll,
			changeVisibleForm,
			toSubmit,
			toCancel,
			toRemove,
			getCheckData,
			expandAll,
    };  
  },  
});  
</script>

<style scoped>
.menu-box {
  width: calc(100vw - 220px);
  height: calc(100vh);
  margin-top: 10px;
  box-sizing: border-box;
  overflow: hidden;
}
.top-search {
  margin-top: 10px;
  padding: 10px;
  height: 40px;
  border-radius: 4px;
  background-color: #fff;
}
.table-box {
  margin-top: 10px;
  padding: 10px;
  height: 700px;
  width: 100%;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #fff;
}

.search-input {
  display: inline-block;
  width: 98%;
  margin-right: 10px;
}
.table-style {
  margin-top: 10px;
}
.isChecked {
  display: inline-block;
  background-color: #e8f1ff;
  color: red;
}
</style>